<template>
	<view class="recordOutHouse">
		<view class="recordOutHouse_title">
			<!-- <view class="title_search">
				<u-search placeholder="输入申请人搜索审批" v-model="keyword"></u-search>
			</view> -->
			<view class="select_ku" @click="showtimeSelect = true">
				<view>
					选择月份：
					<view style="border-radius: 9.52rpx;display: inline-block;border: 1rpx solid #707070FF;">
						<text style="color: #2276BCFF;margin-left: 13.35rpx;">{{sTime}}月</text>
						<view style="display: inline-block;margin-left: 66.75rpx;margin-right: 13.35rpx;">
							<u-icon name="arrow-down" color="#707070FF" size="35"></u-icon>
						</view>
					</view>
				</view>
				<u-picker
				title="选择月份"
				mode="time"
				:params="params"
				:mask-close-able="false"
				v-model="showtimeSelect"
				@confirm="selectTime">
				</u-picker>
			</view>
			<view class="type_cart" @click="showCartSelect = true">
				<view>
					审批类型：
					<view style="border-radius: 9.52rpx;display: inline-block;border: 1rpx solid #707070FF;">
						<text style="color: #2276BCFF;margin-left: 13.35rpx;">{{selectCartType_value}}</text>
						<view style="display: inline-block;margin-left: 66.75rpx;margin-right: 13.35rpx;">
							<u-icon name="arrow-down" color="#707070FF" size="35"></u-icon>
						</view>
					</view>
				</view>
				<u-select
				title="审批类型" 
				:mask-close-able="false" 
				:default-value="[selectCartValue_default]" 
				v-model="showCartSelect" 
				:list="selectCartlist" 
				@confirm="selectCartType">
				</u-select>
			</view>
		</view>
		<view style="margin-top: 25vh;" v-show="isempty">
			<u-empty text="无历史记录" mode="history"></u-empty>
		</view>
		<!-- 这个页面要做修改 -->
		<scroll-view scroll-y class="content_scroll" @scrolltolower="loaderList" v-show="!isempty">
			<yt-card-time :time="item.create_date" head=" " v-for="(item,index) in list[selectCartValue_default].cartList" :key="index" @click="toDetails(item,index)" v-show="item.show">
				<u-row :gutter="12">
					<u-col :span="8" class="title-text">
						<image style="width: 53.4rpx;height: 53.4rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf89db3-4d55-4b1f-a05e-c0a1170f8dce/1ff0c131-54a0-4822-b477-b445c7a410ca.png"></image>
						<text class="text">
							审批	
						</text>
						<view class="title">
							<text style="margin-right: 21.36rpx;">{{item.applicant}}</text>提交的
							<text v-show="!item.istransfer">出库</text>
							<text v-show="item.istransfer">转库</text>审批
						</view>
						<view style="font-size: 32.04rpx;margin-top: 26.7rpx;">
							出货仓库：<text style="color: #BB0000FF;">{{item.outhouse}}</text>
						</view>
						<view style="font-size: 32.04rpx;margin-top: 8.01rpx;">
							货品数量：<text style="color: #BB0000FF;">{{item.cart_names.length}}件</text>
						</view>
					</u-col>
					<u-col :span="4">
						<!-- 待审批--><image v-show="!item.isfinish" style="width: 234.96rpx;height: 234.96rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf89db3-4d55-4b1f-a05e-c0a1170f8dce/ed67ef42-6d9d-4913-8b37-2e6a9de4e833.png"></image>
						<!-- 已通过--><image v-show="item.isagree && item.isfinish" style="width: 234.96rpx;height: 234.96rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf89db3-4d55-4b1f-a05e-c0a1170f8dce/a2e15ba8-e2fd-45d6-bde0-74598fc510bd.png"></image>
						<!-- 已拒绝--><image v-show="!item.isagree && item.isfinish" style="width: 234.96rpx;height: 234.96rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf89db3-4d55-4b1f-a05e-c0a1170f8dce/15b49721-d50e-41e4-b1ba-3daccd2403c9.png"></image>
					</u-col>
				</u-row>
				<scroll-view scroll-y style="background-color: #F1F1F1;border-radius: 10rpx; max-height:11vh;font-size: 32.04rpx;margin-top: 8.01rpx;margin-left: 5.34rpx;margin-bottom: 26.7rpx;">
					<u-row :gutter="12">
						<u-col :span="6" v-for="(item1,index1) in item.cart_names" :key="index1">
							<text>
								商品名称：<text style="color: #BB0000FF;">{{item1.cartName}}</text>
							</text>
						</u-col>
					</u-row>
				</scroll-view>
				<view class="sp-text" v-show="item.isfinish">
					<text style="margin-left: 5.34rpx;">{{item.applicant_sp}}</text>
					<text v-show="!item.isagree">拒绝</text>
					<text v-show="item.isagree">通过</text>了审批：
					<text style="margin-right: 21.36rpx;">{{item.applicant}}</text>
					提交的出库审批
				</view>
			</yt-card-time>
			<view class="gap_phone" v-show="!isempty">
				<u-divider class="gaps" :margin-top="60" bg-color="#EEEEEEFF" border-color="#5f5f5f00">
					<u-loadmore v-show="isLoader" :status="status"/>
				</u-divider>
			</view>
		</scroll-view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import ytCardTime from '../../comment/yt-card-time.vue'
	export default {
		data() {
			return {
				status: 'loadmore',
				showCartSelect:false,
				myself:uni.getStorageSync('lastUsername'),
				list:[
					{
						cartList:[]
					},
					{
						cartList:[]
					}
				],
				selectCartlist:[ //主机电器、头部、水槽、配件、赠品
					{
						value: '1', 
						label: '出库审批'
					},
					{
						value: '2',
						label: '转库审批'
					}					
				],
				selectCartValue_default:0,
				selectCartType_value:'出库审批',
				showtimeSelect:false,
				params: {
					year: false,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				sTime:'08',
				isLoader:false,//测试用,
				isall:true,//是否全量查询
				limit:3,//初始化显示数量6
				hp_num:[],//货品数量
				applicant:[],//审批申请人
				cart_names:[],//货品名称
				isagree:[],//是否同意
				isfinish:[],//是否结束审批
				istransfer:[],//是否转库申请
				create_date:[],//审批创建时间
				isempty:true
			};
		},
		onLoad() {
			uni.showLoading({
				title:'加载中。。。'
			})
			this.sTime = this.FormatMounth(new Date())
			var Vue = this
			uniCloud.callFunction({
				name: 'uni-id-cf_mobile',
				data: {
					action:"looksp",
					params:{
						keyword:'',
						moonth:'',
						sp_type:true,
						num_sp:Vue.limit,
						isall_sp:Vue.isall
					}
				}
			}).then(({result}) => {
				if(result.code != 0){
					uni.hideLoading()
					this.$refs.uToast.show({
						title: result.errMsg || result.msg,
						type: 'error',
						position:"top"
					})	
				}else{
					let {splength,data} = result
					if(data.data.length == 0){
						this.isempty = true
					}else{
						this.isempty = false
					}
					data.data.map((item)=>{
						item.show = true
						this.list[1].cartList.push(item)
					})
				}
				console.log(result)
				console.log(this.list)
			}).catch(err => {
				uni.hideLoading()
				console.log(err)
			})
			uniCloud.callFunction({
				name: 'uni-id-cf_mobile',
				data: {
					action:"looksp",
					params:{
						keyword:'',
						moonth:'',
						sp_type:false,
						num_sp:Vue.limit,
						isall_sp:Vue.isall
					}
				}
			}).then(({result}) => {
				if(result.code != 0){
					uni.hideLoading()
					this.$refs.uToast.show({
						title: result.errMsg || result.msg,
						type: 'error',
						position:"top"
					})	
				}else{
					let {splength,data} = result
					if(data.data.length == 0){
						this.isempty = true
					}else{
						this.isempty = false
					}
					data.data.map((item)=>{
						item.show = true
						this.list[0].cartList.push(item)
					})
					uni.hideLoading()
				}
				console.log(result)
				console.log(this.list)
			}).catch(err => {
				uni.hideLoading()
				console.log(err)
			})
		},
		methods:{
			toDetails(item,index){
				uni.navigateTo({
					url:`../recordDetails/recordDetails?applicant=${encodeURIComponent(item.applicant)}&client=${encodeURIComponent(item.client)}&client_phone=${encodeURIComponent(item.client_phone)}&client_local=${encodeURIComponent(item.client_local)}&cart_names=${encodeURIComponent(JSON.stringify(item.cart_names))}&istra=${encodeURIComponent(item.istransfer)}&outhouse=${encodeURIComponent(item.outhouse)}&transferhouse=${encodeURIComponent(item.transferhouse)}&comment=${encodeURIComponent(item.comment)}`
				})
			},
			loaderList(e){
				this.isLoader = true
				this.status = 'loading';
				this.limit += 3;
				let sptype = true
				console.log(this.selectCartValue_default)
				if(this.selectCartValue_default == 0){
					sptype = false
				}else{
					sptype = true
				}
				var Vue = this;
				uniCloud.callFunction({
					name: 'uni-id-cf_mobile',
					data: {
						action:"looksp",
						params:{
							keyword:'',
							moonth:'',
							sp_type:sptype,
							num_sp:Vue.limit,
							isall_sp:Vue.isall
						}
					}
				}).then(({result}) => {
					if(result.code != 0){
						uni.hideLoading()
						this.$refs.uToast.show({
							title: result.errMsg || result.msg,
							type: 'error',
							position:"top"
						})
						return;
					}else{
						let {splength,data} = result
						let have = 0
						this.list[this.selectCartValue_default].cartList.splice(0,this.list[this.selectCartValue_default].cartList.length)
						data.data.map((item)=>{
							item.show = true
							this.list[this.selectCartValue_default].cartList.push(item)
						})
						this.list[this.selectCartValue_default].cartList.map((item,index)=>{
							if(this.FormatMounth(new Date(item.create_date)) == this.sTime){
								this.list[this.selectCartValue_default].cartList[index].show = true
								this.list[this.selectCartValue_default].cartList.splice(index,1,this.list[this.selectCartValue_default].cartList[index])
								have = 1
							}else{
								this.list[this.selectCartValue_default].cartList[index].show = false
								this.list[this.selectCartValue_default].cartList.splice(index,1,this.list[this.selectCartValue_default].cartList[index])
							}
						})
						if(this.list[this.selectCartValue_default].cartList.length == 0 || have == 0){
							this.isempty = true
						}else{
							this.isempty = false
						}
						if(Vue.limit >= splength){
							Vue.limit = splength
							this.status = 'nomore';
							this.isLoader = true
						}else{
							this.status = 'loading';
							this.isLoader = false
						}
						have = 0
					}
					console.log(result)
				}).catch(err => {
					console.log(err)
				})
				
			},
			selectCartType(e){
				this.selectCartValue_default = e[0].value - 1
				this.selectCartType_value = e[0].label
				uni.showLoading({
					title:'加载中。。。'
				})
				var Vue = this;
				let sptype = true
				console.log(this.selectCartValue_default)
				if(this.selectCartValue_default == 0){
					sptype = false
				}else{
					sptype = true
				}
				uniCloud.callFunction({
					name: 'uni-id-cf_mobile',
					data: {
						action:"looksp",
						params:{
							keyword:'',
							moonth:'',
							sp_type:sptype,
							num_sp:Vue.limit,
							isall_sp:Vue.isall
						}
					}
				}).then(({result}) => {
					if(result.code != 0){
						uni.hideLoading()
						this.$refs.uToast.show({
							title: result.errMsg || result.msg,
							type: 'error',
							position:"top"
						})	
					}else{
						let {splength,data} = result
						this.list[this.selectCartValue_default].cartList.splice(0,this.list[this.selectCartValue_default].cartList.length)
						data.data.map((item)=>{
							item.show = true
							this.list[this.selectCartValue_default].cartList.push(item)
						})
						if(this.list[this.selectCartValue_default].cartList.length == 0){
							this.isempty = true
						}else{
							this.isempty = false
						}
					}
					this.sTime = this.FormatMounth(new Date())
					uni.hideLoading()
					console.log(result)
				}).catch(err => {
					console.log(err)
				})	
				console.log(e[0].label)
			},
			selectTime(e){
				this.sTime = e.month
				uni.showLoading({
					title:'加载中。。。'
				})
				let have = 0
				this.list[this.selectCartValue_default].cartList.map((item,index)=>{
					if(this.FormatMounth(new Date(item.create_date)) == e.month){
						this.list[this.selectCartValue_default].cartList[index].show = true
						this.list[this.selectCartValue_default].cartList.splice(index,1,this.list[this.selectCartValue_default].cartList[index])
						have = 1
					}else{
						this.list[this.selectCartValue_default].cartList[index].show = false
						this.list[this.selectCartValue_default].cartList.splice(index,1,this.list[this.selectCartValue_default].cartList[index])
					}
				})
				if(this.list[this.selectCartValue_default].cartList.length == 0 || have == 0){
					this.isempty = true
				}else{
					this.isempty = false
				}
				uni.hideLoading()
			},
			FormatMounth(fmt){
				let m = ''
				m = fmt.getMonth() + 1
				m = m < 10 ? '0' + m : m
				return m; 
			}
		},
		components:{
			ytCardTime
		}
	}
</script>

<style lang="scss">
	.recordOutHouse{
		position: absolute;
		width: 100%;
		min-height: 1480rpx;
		background-color: #EEEEEEFF;
		.recordOutHouse_title{
			padding: 32.04rpx;
			background-color: #fff;
			width: 100%;
			border-bottom: 2.67rpx solid #7070703D;
			.title_search{
				padding: 0 0 26.7rpx 0;
			}
			.select_ku{
				padding: 26.7rpx 0;
				font-size: 30rpx;
			}
			.type_cart{
				padding: 26.7rpx 0 0 0;
				font-size: 30rpx;
			}
		}
		.content_scroll{
			position: absolute;
			display: block;
			height: 85vh;
			.gap_phone{
				height: 300rpx;
				width: 100%;
			}
		}
		.sp-text{
			color: #63636391;
		}
		.title-text{
			.text{
				vertical-align: top;
				font-size: 42.72rpx;
				color: #F39801FF;
				margin-left: 26.7rpx;
			}
			.title{
				margin-top:13.35rpx ;
				font-size: 40.05rpx;
			}
		}
	}

</style>
